<template>
  <div class="bless-message">
    <div class="container">
      <img src="../assets/icon/close.png" alt="" class="close" @click="$emit('close_confirm',0)">
      <div class="gift-info">
        <p>您将送给新人{{ gift_info.count }}{{gift_info.unit}}{{ gift_info.title }}</p>
        <p>价格：￥{{ gift_info.price }}</p>
      </div>
      <div class="name"><input type="text" name="name" placeholder="您的姓名" ref="name" v-model="info.name"></div>
      <div class="message"><textarea type="text" name="message" placeholder="您的祝福" v-model="info.content"></textarea></div>
      <div class="love-button message_button"><button @click="gift_pay">确定</button></div>
    </div>
    <love-toast v-if='toast.display' :message="toast.msg"></love-toast>
  </div>
</template>

<script>
import wxPay from '../utils/wxPay'
import LoveToast from '../components/love-toast'
export default {
  name: 'bless-gift-confirm',
  props: {
    gift_order_id: Number
  },
  data(){
    return {
      info: {
        name: '',
        content: ''
      },
      toast: {
        display: false,
        msg: ''
      }
    }
  },
  computed: {
    gift_info: function() {
      let data = this.$store.getters.get_select_gift
      return data
    },
    send_info: function () {
      return {
        order_id: this.gift_order_id,
        name: this.info.name,
        content: this.info.content
      }
    }
  },
  components: {
    LoveToast
  },
  mounted() {
    this.$refs.name.focus()
  },
  methods: {
    gift_pay() {
      document.getElementById('faceoff').style.display = ''
      let that = this
      this.$store.dispatch('gift_pay', this.send_info)
              .then(function (res) {
                document.getElementById('faceoff').style.display = 'none'
                wxPay.onBridgeReady(
                        res.data.data,
                        function(){
                          that.$store.dispatch('get_bless_list', 'refresh')
                          that.$emit('bless_gift_reload', 1)
                        },function() {
                          that.$emit('bless_gift_reload', 0)
                        })
              })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .bless-message,.message,.name,.message_button ,.gift-info{display: flex; align-items: center;justify-content: center;align-content: center;z-index:999;}
  .bless-message {position: fixed; width: 100%; height: 100%; background-color: rgba(90, 67, 152, 0.7);  top: 0;z-index: 9;}
  .container {width: 65%;background: #fff0ef;padding: 2rem;position: relative;}
  .name input{width: 85%;height: 4rem;border-radius: 5%; border: #dec852 1px solid;}
  .name,.message{margin-bottom: 1rem;}
  .gift-info {flex-wrap: wrap}
  .gift-info p{width: 85%; text-align: left;margin: 0 0 1rem 0; font-size: 1.4rem; color: #5a4398}
  .message { height: 63%;}
  .message textarea{width: 85%;height: 12rem;border-radius: 5%; border: #dec852 1px solid;}
  .message_button { height: 25%;}
  .message_button button {font-size: 1.4rem; width: 85%;}
</style>
